<template>
  <el-dialog
    :title="`${id ? '编辑' : '新增'}区块名称`"
    width="max-content"
    class="el-dialog-box"
    :visible.sync="dialogVisible"
    @close="closeDialog"
  >
    <div class="edit-label-content">
      <div class="container">
        <el-form
          :inline="true"
          ref="myForm"
          :model="form"
          class="demo-form-inline"
        >
          <el-row>
            <el-form-item
              label="区块名称"
              label-width="120px"
              :rules="[{ required: true, message: '区块名称不能为空' }]"
            >
              <el-input
                maxlength="50"
                v-model.trim="form.name"
                type="text"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item
              label="通行最长时间"
              label-width="120px"
              :rules="[{ required: true, message: '通行最长时间不能为空' }]"
            >
              <el-input
                maxlength="3"
                v-model="form.timeConsuming"
                @input="handleInput"
                type="number"
                placeholder="请输入"
              >
                <el-button slot="append">分钟</el-button>
              </el-input>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 按键 -->
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="closeDialog">取消</div>
      <div class="default-btn primary-btn" @click="save">确定</div>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      dialogVisible: false,
      form: {
        name: "",
        timeConsuming: "",
      },
    };
  },
  mounted() {},
  methods: {
    open(id, payload) {
      this.closeDialog();
      this.dialogVisible = true;
      if (id) {
        this.id = id;
        this.initData();
      }
    },
    handleInput() {
      if (this.form.timeConsuming) {
        this.form.timeConsuming = this.form.timeConsuming
          .slice(0, 3)
          .replace(/[^\d]/g, "");
      }
    },

    initData() {
      this.$http({
        url: this.$http.adornUrl(`/platform/route/block/getBlock/${this.id}`),
        method: "get",
      }).then(({ data }) => {
        this.form = data;
      });
    },
    save() {
      if (!this.form.name) {
        this.$message({
          message: "区块名称不能为空",
          type: "error",
          duration: 1500,
        });
        return;
      }
      if (!this.form.timeConsuming) {
        this.$message({
          message: "通行最长时间不能为空",
          type: "error",
          duration: 1500,
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl(
          this.id
            ? "/platform/route/block/updateBlock"
            : "/platform/route/block/saveBlock"
        ),
        method: "post",
        data: this.$http.adornData(this.form),
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t("publics.operation"),
          type: "success",
          duration: 1500,
        });
        this.$emit("refresh");
        this.id = "";
      });
      this.dialogVisible = false;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.id = "";
      this.form = {
        name: "",
        timeConsuming: "",
      };
      this.$refs.myForm && this.$refs.myForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
}
.el-input {
  width: 100%;
}
</style>
